<template>
	<view class="content">
		<!-- 出差记录 -->
		<view class="plan" >
			<view class="grace-nowrap grace-flex-vcenter">
				<view class="hd-title"></view>
				<view style="font-size: 34rpx;">{{i18n[title] ? i18n[title] : title}}</view>
			</view>
			<!-- 列表展示 -->
			<view class="product" >
				<view class="product-content " v-for="(item, index) in list" :key="item.id">
					
					<view class="">
						<view class="product-title">{{i18n['date'] ? i18n['date'] : '开始日期'}}</view>
						<view class="left-margin">
							<view class="cell-detail" @click="selectDatePicker('date', index)">
								<view class="icon iconfont icon-xiangyou fr" style="color: #999;"></view>
								<input class="uni-input"
								 v-model="item.date"
								 placeholder="请选择"
								 disabled="true"
								 />
							</view>
						</view>
					</view>
					
					<view class="">
						<view class="product-title">{{i18n['date1'] ? i18n['date1'] : '结束日期'}}</view>
						<view class="left-margin">
							<view class="cell-detail" @click="selectDatePicker('date1', index)">
								<view class="icon iconfont icon-xiangyou fr" style="color: #999;"></view>
								<input class="uni-input"
								 v-model="item.date1"
								 placeholder="请选择"
								 disabled="true"
								 />
							</view>
						</view>
					</view>
					
					<view class="">
						<view class="product-title">{{i18n['FromPlace'] ? i18n['FromPlace'] : '出发点'}}</view>
						<view class="left-margin">
							<input class="uni-input" type="text" placeholder="请输入" v-model="item.FromPlace"/>
						</view>
					</view>
					
					<view class="">
						<view class="product-title">{{i18n['ToPlace'] ? i18n['ToPlace'] : '到达地'}}</view>
						<view class="left-margin">
							<input class="uni-input" type="text" placeholder="请输入" v-model="item.ToPlace"/>
						</view>
					</view>
					
					<view class="">
						<view class="product-title">{{i18n['Hotel'] ? i18n['Hotel'] : '住宿'}}</view>
						<view class="left-margin">
							<input class="uni-input" type="number" placeholder="请输入" v-model.number="item.Hotel"/>
						</view>
					</view>
					
					<view class="">
						<view class="product-title">{{i18n['Ship'] ? i18n['Ship'] : '轮船'}}</view>
						<view class="left-margin">
							<input class="uni-input" type="number" placeholder="请输入" v-model.number="item.Ship"/>
						</view>
					</view>
					
					<view class="">
						<view class="product-title">{{i18n['Plane'] ? i18n['Plane'] : '飞机'}}</view>
						<view class="left-margin">
							<input class="uni-input" type="number" placeholder="请输入" v-model.number="item.Plane"/>
						</view>
					</view>
					
					<view class="">
						<view class="product-title">{{i18n['Train'] ? i18n['Train'] : '火车'}}</view>
						<view class="left-margin">
							<input class="uni-input" type="number" placeholder="请输入" v-model.number="item.Train"/>
						</view>
					</view>
					
					<view class="">
						<view class="product-title">{{i18n['Bus'] ? i18n['Bus'] : '长途汽车'}}</view>
						<view class="left-margin">
							<input class="uni-input" type="number" placeholder="请输入" v-model.number="item.Bus"/>
						</view>
					</view>
					
					<view class="">
						<view class="product-title">{{i18n['Taxi'] ? i18n['Taxi'] : '市内交通'}}</view>
						<view class="left-margin">
							<input class="uni-input" type="number" placeholder="请输入" v-model.number="item.Taxi"/>
						</view>
					</view>
					
					<view class="">
						<view class="product-title">{{i18n['Meal'] ? i18n['Meal'] : '餐费'}}</view>
						<view class="left-margin">
							<input class="uni-input" type="number" placeholder="请输入" v-model.number="item.Meal"/>
						</view>
					</view>
					
					<view class="cancel" @click="del(index)">
						<view class="icon iconfont icon-quxiao"></view>
					</view>
				</view>
			</view>
			<view class="add grace-nowrap" @click="addItem">
				<view class="icon iconfont icon-tianjia" style="color: #00B26A; font-size: 42rpx;"></view>
				<span style='font-size: 32rpx;'>新增</span>
			</view>
		</view>
		<view class="btn-box">
			<button type="default" @click="save">确定</button>
		</view>
		<date-time-picker ref='date-time' :indicatorStyle='indicatorStyle' :type='datePicker.type' :datestring='datePicker.datestring' @change='dateTimeChange'></date-time-picker>
	</view>
</template>

<script>
	import DateTimePicker from '@/components/bory-dateTimePicker/bory-dateTimePicker.vue'
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import myProductChoose from '@/components/my-product-choose.vue'
	import vvSelect from '@/components/vv-select/vv-select'
	import {ajax,getUserInfo} from '@/common/common.js'
	import {Url,bpmUrl} from "@/common/config.js"
	export default {
		data() {
			return {
				datePicker: {
					type: 'date',
					datestring: ''
				},
				title: '',
				list: [],
				OldDepart: '',
				customerList:[],
				user: {},
				isShowToolBtn: false,
				isfiledDisabled: {},
				searchField: {
					paramasMap: {},
					headersMap: {
						sysid: "bpm",
						syspwd: "pass",
						userid: ''
					},
					url: ''
				}
			}
		},
		components: {
			uniDrawer,
			uniSearchBar,
			myProductChoose,
			vvSelect,
			DateTimePicker
		},
		computed: {
			i18n() {
				return this.$t('form')
			},
			indicatorStyle() {
				return {
					background: 'rgba(0,255,0,.2)',
					height: '40px',
				};
			}
		},
		onLoad(opt) {
			this.formData = opt.formData ? JSON.parse(opt.formData) : {} // 只读，仅注册可以不放在 data 管理 
			this.bussiness = opt.formData ? JSON.parse(opt.bussiness) : {} // 只读，仅注册可以不放在 data 管理 
			this.title = opt.title || ''
		},
		methods: {
			
			// 计算表格中的数据
			computer0() {
				console.log("计算结果：", this.list)
				return this.list.reduce((pre, cur) => {
					return {
						Hotel: cur['Hotel'] || 0 + pre['Hotel'] || 0, // 住宿
						Ship: cur['Ship'] || 0 + pre['Ship'] || 0, // 轮船
						Plane: cur['Plane'] || 0 + pre['Plane'] || 0, // 飞机
						Train: cur['Train'] || 0 + pre['Train'] || 0, // 火车
						Bus: cur['Bus'] || 0 + pre['Bus'] || 0, // 长途汽车
						Taxi: cur['Taxi'] || 0 + pre['Taxi'] || 0, // 市内交通
						Meal: cur['Meal'] || 0 + pre['Meal'] || 0 // 餐费
					}
				}, {
					Hotel: 0,
					Ship: 0,
					Plane: 0,
					Train: 0
				})
			},
			
			// 弹出日期选择弹窗
			selectDatePicker(prop, index){
				this.activeProp = prop
				this.activeIndex = index
				this.datePicker.type = 'date'
				
				this.$refs['date-time'].show();
			},
			
			// 日期选值之后
			dateTimeChange(value) {
				console.log(value)
				let item = { ...this.list[this.activeIndex], [this.activeProp]: value }
				this.$set(this.list, this.activeIndex, item)
				console.log(item)
			},
			
			del(index){
				let list = this.list.splice(index, 1)
			},
			
			addItem() {
				this.list.push({
					date: '', // 开始日期
					date1: '', // 结束日期
					FromPlace: '', // 出发地
					ToPlace: '', // 到达地
					Hotel: '', // 住宿
					Ship: '', // 轮船
					Plane: '', // 飞机
					Train: '', // 火车
					Bus: '', // 长途汽车
					Taxi: '', // 市内交通
					Meal: '' // 餐费
				})
			},
			
			save(){
				let DocUnid = this.bussiness.docUnid
				// 保存数据
				ajax({
					url:'/bpm/post',
					method: 'POST',
					data: { ...this.searchField, ...{
						paramasMap: {
							xmlValList: this.list,
							DocUnid
						},
						url: bpmUrl + '/rest/appform/R_hra_B017/R_hra_B017'
					} }
				})
				// todo: 此处把计算完的结果保存 需要在主表单赋值
				uni.setStorageSync('trip-record',this.computer0())
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "@/common/css/style.css";
	@import "@/common/css/icons.css";
	.grace-nowrap{display:flex; flex-direction:row; flex-wrap:nowrap;}
	.grace-flex-vcenter{align-items:center;}
	.cancel{
		color: #d10000;
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		.icon{
			font-size: 42rpx;
		}
	}
	.hd-title{
		width: 10rpx;height: 30rpx;background-color: #00B26A;margin-right: 5px;
	}
	.product {
		margin: 30rpx;
		font-size: 32rpx;
	}
	
	.product-content {
		position: relative;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 30rpx;
		margin-bottom: 20rpx;
		border-radius: 10rpx;
		background-color: rgba(0, 167, 60, 0.19);
		line-height: 60rpx;
	}
	
	.product-title {
		font-weight: 500;
	}
	
	.left-margin {
		margin-left: 50rpx;
		color: #C0C0C0;
	}
	
	.content {
		font-size: 26rpx;
		font-weight: 500;
		padding-bottom: 46px;
	}
	
	.plan {
		padding: 30rpx;
		background-color: #FFFFFF;
	}
	
	.add {
		padding: 20rpx;
	}
	.btn-box{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}	
	.fr{
		float: right;
	}
</style>